<!--AI预警  -->
<template>
	<border cardTitle="病人纳管率">
		<Chart v-if="!isNull" :optionData="option_column" style="height: 100%"></Chart>
		<div v-else style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
			<img src="/img/dashboard/nullPng.png" alt="" />
		</div>
	</border>
</template>

<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	let color = ['#2467ED', '#16E4CF', '#EBA62C'];
	import * as echarts from 'echarts';
	import {
		bigScreenApi
	} from '@/api/index';
	import {
		getRandom
	} from '@/utils/base.js'
	let timeOut;
	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				province: ['莲都', '缙云', '龙泉', '青田', '遂昌', '松阳', '云和', '景宁', '庆元'],
				option_column: {
					xAxis: {
						type: 'category',
						data: [],
						textStyle: {
							color: '#fff'
						},
						// axisLabel: {
						//   rotate: 45,
						// },
						axisLabel: {
							textStyle: {
								color: '#fff'
							},
							formatter: function(value, index) {
								// console.log(value);
								let aname = value.split(',')[0];
								return aname;
							}
						}
					},
					dataZoom: [{
						show: false, //为true滚动条出现
						type: 'slider', //type:'inside'，滚动条在最下面，鼠标点击滚动
						startValue: 0, // 从头开始。
						endValue: 5 //end百分比显示范围，endValue具体显示几个数值
					}],
					grid: {
						left: '12%',
						top: '15%',
						bottom: '15%',
						right: '12%'
					},
					tooltip: {
						formatter: function(value, index) {
							// console.log(value);
							let aname = value.name.split(',')[1];

							return aname + ':' + value.value + '件';
						}
					},
					yAxis: {
						type: 'value',
						nameTextStyle: {
							fontSize: 14,
							fontWeight: 800
						},

						splitNumber: 3,
						minInterval: 1,
						splitLine: {
							lineStyle: {
								type: 'dashed',
								opacity: 0.5,
								color: '#495059'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#999999'
							}
						}
					},
					itemStyle: {
						normal: {
							color: '#4282FF'
						}
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: 12,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
										// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
										offset: 0,
										color: '#4282FF'
									},
									{
										offset: 1,
										color: 'rgba(66,130,255,0.5)'
									}
								])
							}
						},
						label: {
							show: true,
							position: 'top',
							fontSize: 12,
							textStyle: {
								//数值样式
								color: '#fff'
								// fontStyle: 'italic',
								// fontSize: 16,
							}
						}
					}]
				},
				isNull: true
			};
		},
		props: {
			level: {
				type: [String, Number],
				default: 0
			},
			areaList: {
				type: [Array],
				default: () => []
			},
			cityId: {
				type: [String, Number],
				default: ''
			}
		},
		watch: {
			level: {
				handler(newV, oldV) {
					this.getInfo();
				},
				immediate: true
			}
		},
		methods: {
			getInfo() {
				// this.$postAction(bigScreenApi.alarmCount, {
				// 	xzqhbm: this.level > 1 ? this.cityId : '',
				// 	level: this.level
				// }).then(res => {
				// 	if (res && res.code == 1) {

				// 	}
				// });
				let cowData = []
				this.province.forEach(item => {
					cowData.push({
						xzqhmc: item,
						alarmCount: getRandom(10, 40)
					})
				})

				console.log(cowData);
				let data = [];
				let nameList = [];
				cowData.forEach(item => {
					data.push(item.alarmCount);
					nameList.push(item.xzqhmc.slice(0, 3) + ',' + item.xzqhmc);
				});
				console.log(data);
				this.isNull = cowData.length == 0 ? true : false;
				this.option_column.series[0].data = data;
				this.option_column.xAxis.data = nameList;
			},
			autoMove() {
				timeOut = setInterval(() => {
					// clearInterval(this.timeOut)
					// 每次向后滚动一个，最后一个从头开始。
					// if(this.stopMove){ return }
					if (Number(this.option_column.dataZoom[0].endValue) == this.option_column.series[0].data.length - 1) {
						this.option_column.dataZoom[0].endValue = 6;
						this.option_column.dataZoom[0].startValue = 0;
					} else {
						this.option_column.dataZoom[0].endValue = this.option_column.dataZoom[0].endValue + 1;
						this.option_column.dataZoom[0].startValue = this.option_column.dataZoom[0].startValue + 1;
					}
					// myChart.setOption(this.option_column);
				}, 3000);
			}
		},
		mounted() {
			this.autoMove();
		},
		beforeDestroy() {
			clearInterval(timeOut);
		}
	};
	// var timeOut = null;
	// myChart.on('mouseover', stop);
	// myChart.on('mouseout', goMove);
	// autoMove();

	// //停止滚动
	// function stop() {
	//   clearInterval(timeOut);
	// }
	// //继续滚动
	// function goMove() {
	//   autoMove();
	// }
</script>

<style></style>